<template>
	<view>
		<u-toast ref="uToast" />

		<!-- 方案预览 -->
		<previewImage ref="previewImage" :opacity="0.8" :wearData="shareData" :imgs="imgs" :descs="descs" @longPress="longPress"></previewImage>

		<!-- 自定义头部 -->
		<u-navbar :is-back="false" v-if="!hasLogin">
			<view class="slot-header">
				<view class="title">陌搭</view>
			</view>
		</u-navbar>
		<u-navbar :is-back="false" v-if="hasLogin">
			<view class="slot-header">
				<image src="../../static/img/index_nav_user.png" class="left_img" @click="toPage('my')"></image>
				<view class="title">陌搭</view>
				<view></view>
			</view>
		</u-navbar>

		<!-- 切换角色 -->
		<u-modal v-model="changeRoleShow" @confirm="changeRoleConfirm" ref="uModal" :show-cancel-button="true" :content="roleChangeTitle"></u-modal>

		<view class="map_area" :style="{height:navHeight+'px'}">
			<map id="map" :latitude="latitude" :longitude="longitude" :markers="covers" style="width: 100%;height: 100%;position: absolute;left: 0;right: 0;top: 0;bottom: 0;"
			 max-scale='18' min-sale='14' @tap="clickMap" @regionchange="changeEvent" show-location></map>

			<view class="notice_area" style="top: 32rpx">
				<view class="stylist_top_area flex_row" v-if='userInfo.role === 1'>
					<view class="left flex_col" hover-class="opacity7">
						<view class="md_title32" style="padding-bottom: 12upxs;">今日收入</view>
						<u-count-to :start-val="0.00" :end-val="income" :decimals="2" :font-size="48"></u-count-to>
					</view>
					<view style="width: 1px;height: 111upx;background: #D8D8D8;"></view>
					<view class="right flex_col" hover-class="opacity7">
						<view class="md_title32" style="padding-bottom: 12upxs;">今日接单</view>
						<u-count-to :start-val="0" :end-val="orderNum" :decimals="0" :font-size="48"></u-count-to>
					</view>
				</view>
				<view style="margin-top: 8upx;height: 192upx;width: 100%;position: relative;" v-if="userInfo.role === 1">
					<lff-barrage ref="lffBarrage" :maxTop="72" type="leftBottom"></lff-barrage>
				</view>
			</view>

			<!-- 订单类型 -->
			<view class="notice_area" style="top: 7rpx">
				<u-notice-bar v-if="userInfo.role === 0" :duration="4000" mode="vertical" :list="list" type="none" color="#666666"
				 bg-color="white" padding="12rpx 24rpx" border-radius="12" font-size="24" volume-size="26"></u-notice-bar>
			</view>

			<!-- 用户选择订单类型 -->
			<view class="subsection_area" v-if='userInfo.role === 0'>
				<view style="width: 337upx;margin: 0 auto;">
					<u-subsection ref="selectOrderType" active-color="#FFFFFF" inactive-color="#999999" font-size="28" height="76"
					 bg-color="#FFFFFF" button-color="#B1BEFD" :list="orderTypeList" :current="selectOrderType" @change="sectionChange"></u-subsection>
				</view>
				<view @click="toPage('order')" hover-class="opacity7" v-if='userInfo.role === 0 && wearingNum > 0' class="wearing_area">您目前还有{{ wearingNum }}个搭配订单还没完成<span
					 style="color: #FFCF0B;margin-left: 12upx;">查看详情</span></view>
			</view>

			<!-- 用户发起订单等待弹窗 -->
			<view class="warp animated slideInDown" v-if="userOrderShow">
				<view class="rect_user">
					<view class="left_area_user">
						<view class="tip" style="color: #333333;font-size: 28upx;font-weight: bold;">正在等待搭配师接单…</view>
						<view class="tip flex_row">{{ stylistLevelName }} ￥<u-count-to :start-val="0.00" :end-val="stylistMoney"
							 :decimals="2" :font-size="28"></u-count-to>
						</view>
					</view>
					<view class="right_area_user">
						<view class="time">{{ stylistTimeData.myHours }}:{{ stylistTimeData.myMinutes }}:{{ stylistTimeData.mySeconds }}</view>
						<view class="cancel">
							<u-button type="default" :hair-line='false' :ripple="true" ripple-bg-color="#909399" size="mini" shape="circle"
							 @click="cancelOrder">取消</u-button>
						</view>
					</view>
				</view>
				<view class="addPrice_box">
					<view class="flex_row" style="flex: left;">
						<text>增加</text>
						<view class="addmoney_box" @click="addMoney = 5">5元</view>
						<view class="addmoney_box" @click="addMoney = 50">50元</view>
						<view class="addmoney_box" @click="addMoney = 100">100元</view>
					</view>
					<view class="flex_row" style="flex: right;">
						<text>其他金额</text>
						<input type="number" placeholder="请输入" v-model="addMoney">
						<view class="addPrice">
							<u-button type="default" :hair-line='false' :ripple="true" ripple-bg-color="#909399" size="mini" shape="circle"
							 @click="addPrice">确定</u-button>
						</view>
					</view>
				</view>
				<view class="bottom_tip">添加打赏会更快遇到搭配师哦~</view>
			</view>

			<!-- 右方按钮区域 -->
			<view class="help_area" :style="{top:(userInfo.role === 1?'364rpx':'238rpx')}" @click="toPage('help')">
				<image src="../../static/img/index_tip.png" mode="aspectFit" style="width: 50upx;height: 50upx;"></image>
			</view>

			<MdTooltip :gravity="'left_md'" :tooltipShow="tooltipShow && hasLogin" :content="'点击切换搭配师/用户'" :eleId="'roleChange'"
			 @btnClick="sortTooltipClick"></MdTooltip>

			<view class="right_area flex_col" :style="{top:(userInfo.role === 1?'485rpx':'485rpx')}">
				<view id="roleChange" class="flex_row" style="position: relative;width: 70upx;height: 70upx;background: white;border-radius: 50%;justify-content: center;"
				 hover-class="opacity7" @click="toPage('changeRole')">
					<image class="animated slower4 infinite" :class="{pulse: tooltipShow && hasLogin}" src="../../static/img/index_right_01.png"
					 mode="aspectFit" style="width: 38upx;height: 38upx;"></image>
				</view>
				<view style="position: relative;" hover-class="opacity7" @click="toPage('message')">
					<u-badge type="error" :count="msgCount" :offset="[-10, -10]" size="mini" v-if="msgCount > 0"></u-badge>
					<image src="../../static/img/index_right_02.png" mode="aspectFit" style="width: 70upx;height: 70upx;"></image>
				</view>
				<view hover-class="opacity7" @click="backMylocation">
					<image src="../../static/img/index_right_03.png" mode="aspectFit" style="width: 70upx;height: 70upx;"></image>
				</view>
			</view>

			<!-- 用户底部区域 -->
			<view class="bottom_area" v-if="!hasLogin">
				<view class="login_tip">
					<view class="flex_row">
						<image src="../../static/img/index_nav_user_white.png" style="width: 28upx;height: 29upx;" mode="aspectFit"></image>
						<view class="content">登录账号开始搭配</view>
					</view>
					<view class="btn" @click="goLogin">去登录</view>
				</view>
				<view class="tip_box flex_row">
					<image src="../../static/img/index_tip2.png" mode="aspectFit" style="width: 36upx;height: 43upx;"></image>
					<view class="content">任性退 不满意无理由退款</view>
				</view>
				<view class="select_StylistLevel_area flex_row" hover-class="opacity7" @click="openSelectStylistLevel">
					<view class="ripple" style="width: 16upx;height: 16upx;background: #333333;border-radius: 50%;"></view>
					<view class="content">请选择搭配师等级</view>
				</view>
			</view>
			<view class="bottom_area" v-if="hasLogin && userInfo.role === 0">
				<view class="regis_area flex_col" @click="toPage('regis')" v-if='userInfo.realRole === 0'>
					<view class="regis_area_title">成为搭配师</view>
					<view class="regis_area_content">赚取额外收益</view>
				</view>

				<view class="tip_box flex_row">
					<image src="../../static/img/index_tip2.png" mode="aspectFit" style="width: 36upx;height: 43upx;"></image>
					<view class="content">任性退 不满意无理由退款</view>
				</view>
				<view class="select_StylistLevel_area flex_row" hover-class="opacity7" @click="openSelectStylistLevel">
					<view class="ripple" style="width: 16upx;height: 16upx;background: #333333;border-radius: 50%;"></view>
					<view class="content">请选择搭配师等级</view>
				</view>
			</view>

			<!-- 搭配师接单按钮 -->
			<view class="bottom_getOrder_area" v-if="hasLogin && userInfo.role === 1 && listenStatus === 0" hover-class="opacityRed7"
			 @tap="$u.throttle(getOrder, 500)">
				开始听单
			</view>
			<view class="bottom_getOrder_area_stop" v-if="hasLogin && userInfo.role === 1 && listenStatus === 1" hover-class="opacityRed7"
			 @tap="$u.throttle(stopOrder, 500)" style="background-color: #808080 !important;">
				结束听单
			</view>

			<!-- 订单弹窗 -->
			<u-mask :show="orderShow" :mask-click-able="false">
				<view class="warp_stylist">
					<view style="position: relative;width: 564upx;margin-bottom: 12upx;height: 56upx;">
						<image src="../../static/img/close.png" mode="aspectFit" style="width: 56upx;height: 56upx;position: absolute;right: 0"
						 @click="closeOrder"></image>
					</view>
					<view class="rect" @tap.stop>
						<view class="top">
							<view class="left">来自{{ orderData.placeName }}的{{ orderData.orderType === 0 ? "线下" : "线上" }}搭配订单</view>
							<view class="right" style="color: #FFCF0B;font-weight: bold;">￥{{ orderData.price }}</view>
						</view>
						<view class="middle" hover-class="opacity7" @tap="$u.throttle(receiveOrder, 500)">
							<view>{{ orderTime }}S</view>
							<view style="margin-top: 10upx;">接单</view>
						</view>
						<view class="bottom" @click="closeOrder">
							取消
						</view>
					</view>
					<view class="stopText" @click="stopOrder">停止接单</view>
				</view>
			</u-mask>

			<!-- 选择搭配师等级 -->
			<u-popup v-model="stylistShow" mode="bottom" :border-radius="36" :closeable="false">
				<view class="bottomSheet_content">
					<view class="title">下单</view>

					<!-- 线上订单 -->
					<view v-if="selectOrderType === 0" class="list-cell" v-for="(item, index) in levelList" :key="index" @click="selectStylistLevel(index)">
						<view class="flex_col" style="align-items: flex-start;">
							<view class="flex_row">
								<text>{{ item.levelName }}</text>
								<image v-if="index === 1" src="/static/img/order_recommend.png" mode="aspectFit" style="width: 38upx;height: 43upx;margin-left: 11upx;"></image>
							</view>
							<view style="color: #777777;font-size: 22upx;">{{ item.details }}</view>
						</view>
						<view class="flex_row">
							<!-- 线上订单 -->
							<view class="flex_col">
								<span class="originalPrice" style="margin-right: 24upx;">原价{{ item.originalOnlinePrice }}元</span>
								<span style="margin-right: 24upx;font-size: 28upx;font-weight: bold;">{{ item.onlinePrice }}元/单</span>
							</view>
							<image src="../../static/img/select_on.png" style="width: 34upx;height: 34upx;" v-if="item.selected === true"></image>
							<image src="../../static/img/select_off.png" style="width: 34upx;height: 34upx;" v-else></image>
						</view>
					</view>


					<!-- 线下订单 -->
					<view v-if="selectOrderType === 1 && !hasFinishOneStep">
						<view class="list-cell" v-for="(item, index) in levelList" :key="index" @click="selectStylistLevel(index)">
							<view class="flex_col" style="align-items: flex-start;">
								<view class="flex_row">
									<text>{{ item.levelName }}</text>
									<image v-if="index === 1" src="/static/img/order_recommend.png" mode="aspectFit" style="width: 38upx;height: 43upx;margin-left: 11upx;"></image>
								</view>
								<view style="color: #777777;font-size: 22upx;">{{ item.detailsOffline }}</view>
							</view>
							<view class="flex_row">
								<!-- 线下订单 -->
								<view class="flex_col">
									<span class="originalPrice" style="margin-right: 24upx;">原价{{ item.originalOfflinePrice }}元</span>
									<span style="margin-right: 24upx;font-size: 28upx;font-weight: bold;">{{ item.offlinePrice }}元/小时</span>
								</view>
								<image src="../../static/img/select_on.png" style="width: 34upx;height: 34upx;" v-if="item.selected === true"></image>
								<image src="../../static/img/select_off.png" style="width: 34upx;height: 34upx;" v-else></image>
							</view>
						</view>
						<view class="list-cell">
							<view>搭配时长</view>
							<view class="flex_col" style='align-items: flex-end;'>
								<lxc-count @handleCount="handleCountClick" :min="2" :max="5" :value="timeLength" :delayed="100"></lxc-count>
								<view class="tip">请选择搭配时长(2小时起)</view>
							</view>
						</view>
					</view>

					<view class="market_box" v-if="selectOrderType === 1 && hasFinishOneStep">
						<view class="market_box_top">
							<view class="flex_row">
								<view class="icon xiangqian" @click="hasFinishOneStep=false" style="font-size: 38rpx;color: #111111;font-weight: bold;"></view>
								<view class="name">{{ stylistLevelName }}</view>
							</view>
							<text>已选择</text>
						</view>
						<view class="location" @click="jumpSelectMarket">
							<view class="dot"></view>
							<view class="text" hover-class="opacity7">{{ marketName === '' ? '预约位置': marketName }}</view>
						</view>
					</view>

					<view class="mocup_btn lgbtn" @tap="$u.throttle(createWearSchemeOrder, 1000)">
						确定
					</view>
				</view>
			</u-popup>

			<!-- 选择搭配师等级 -->
			<u-popup v-model="introduceVisible" mode="center" width="670rpx" height="986rpx" border-radius="12">
				<view class="introduct_popue">
					<image class="bg-set" src="http://posting.imguangguang.com/Moda_mini_FirstUserPopue.png" mode="aspectFit"></image>
					<view class="btn" hover-class="opacity7" @click="firstUserKnow">
						我知道了
					</view>
				</view>
			</u-popup>


		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import qqmapsdk from '@/common/qqmap-wx-jssdk.js';
	import {
		isBlank
	} from '@/utils/common.js'
	import eventBus from '@/utils/EventBus.js'
	import app from "../../App.vue"
	import main from "@/main.js"
	import md5 from '../../utils/md5.js';
	import lffBarrage from '@/components/lff-barrage/lff-barrage.vue'
	import MdTooltip from '@/components/MdTooltip/MdTooltip.vue'
	import previewImage from '@/components/kxj-previewImage/kxj-previewImage.vue';
	import lxcCount from '@/components/lxc-count/lxc-count.vue'
	import { mixin } from "@/mixins/wearPlan.js"

	export default {
		computed: {
			...mapState(['hasLogin', 'userInfo', 'unReadCount', 'jumpUrl', 'orderId'])
		},
		components: {
			lffBarrage,
			MdTooltip,
			previewImage,
			lxcCount
		},
		mixins:[mixin], //混入文件
		data() {
			return {
				pH: 0, //窗口高度
				navHeight: 0, //元素的所需高度
				//  滚动数据
				listTimer: null, // 滚动数据定时器
				list: [],
				orderTypeList: [{
						name: '线上搭配'
					},
					{
						name: '线下陪购'
					}
				],
				selectOrderType: 0, // 0: 线上 1.线下
				// 未读消息数
				msgCount: 0,
				// 地图初始化
				latitude: 0,
				longitude: 0,
				covers: [], // 定位焦点
				QQMapWX: null,
				changeEvent: this.debounce(this.handleRegionChange, 300), //debounce()函数：防抖动
				// 搭配师等级
				stylistShow: false,
				stylistLevel: null, // 选中的搭配师等级
				stylistLevelName: '', // 选中的搭配师名称
				stylistMoney: 0, // 选中搭配师的金额
				stylistTimer: null, // 用户下单定时器
				timeLength: 2, // 线下订单选择时长
				hasFinishOneStep: false, // 线下订单第一步
				marketName: '', // 线下订单选择商城名称
				marketId: null, // 线下订单商城ID
				currentTime: 0, // 正向计时初始时间
				timeObj: null, // 时间对象,下方会用到
				stylistTimeData: {
					myHours: '00',
					myMinutes: '00',
					mySeconds: '00'
				},
				levelList: app.globalData.levelList,
				invitationCode: '', // 邀请码
				Jumpurl: '', // 缓存跳转路径
				// 搭配师页面数据
				income: 0,
				orderNum: 0,
				listenStatus: 0, // 0:停止接单, 1:开始接单
				// 搭配师听单数据
				orderData: {}, // 订单数据 可分为用户 搭配师
				orderShow: false,
				orderTime: 30,
				timer: null, // 30s定时器
				// 用户听单数据
				userOrderShow: false,
				addMoney: null, // 加价
				// 切换角色
				changeRoleShow: false,
				roleChangeTitle: "您确定要切换成搭配师角色吗？",
				mapContext: null,
				// 当前用户城市
				city: '',
				// toolTip 提示
				tooltipShow: false,
				// 用户穿搭方案数
				wearingNum: 0,
				// 预览方案
				shareData: {},
				imgs: [],
				descs: [],
				// 首次进入介绍弹窗
				introduceVisible: false,
			}
		},
		async onLoad(options) {
			// 等待APP.vue执行完成
			var _this = this
			await _this.$onLaunched;

			// 每次进入程序判断当前是否获得授权，如果没有就去获得授权，如果获得授权，就直接获取当前地理位置
			_this.getAuthorizeInfo()

			// 循环执行 5分钟执行一次
			_this.getList()
			setInterval(() => {
				setTimeout(_this.getList, 0)
			}, 60000 * 5)

			// 打开消息监听
			eventBus.$on('onNewMsg', senderId => {
				var count = uni.getStorageSync('unReadCount') || 0
				_this.msgCount = count
				console.log("有新消息：" + _this.msgCount)
			});

			eventBus.$on('onNewOrder', customMsgObj => {
				if (_this.listenStatus === 1) {
					console.log("接受到了新的订单", customMsgObj)
					_this.timer = clearInterval(_this.timer); // 保证清除上个定时器
					_this.orderShow = true
					_this.orderData = customMsgObj
					// 播放音频
					const innerAudioContext = uni.createInnerAudioContext();
					innerAudioContext.autoplay = false;
					innerAudioContext.src = '/static/new_order.mp3';
					innerAudioContext.play();
					innerAudioContext.onPlay(() => {
						// console.log('开始播放');
					});
					innerAudioContext.onError((res) => {
						console.log(res.errMsg);
						console.log(res.errCode);
					});
					_this.settime(customMsgObj.endTime);
				}
			});

			if(options.invite_code){
				_this.invitationCode = options.invite_code;
			}
			
			// 页面分享跳转逻辑
			if (options.invite_code && options.jumpUrl) {
				var navigateUrl = JSON.parse(options.jumpUrl)
				var finallyUrl = decodeURIComponent(navigateUrl)
				console.log("分享路径", finallyUrl)
				if (!_this.hasLogin) {
					_this.invitationCode = options.invite_code
					_this.saveJumpUrl(finallyUrl) // 缓存跳转路径 登录后即可跳转
					_this.goLogin()
				} else {
					// 已登录并拥有跳转路径
					uni.navigateTo({
						url: finallyUrl
					})
					_this.saveJumpUrl('')
				}
			}
			
			// 广点通跳转小程序 首次登陆后进入搭配师注册页
			if (options.isFromAd === 'true') {
				var navigateUrl = '/pages/stylist/regisist'
				var finallyUrl = decodeURIComponent(navigateUrl)
				console.log("跳转注册路径", finallyUrl)
				if (!_this.hasLogin) {
					_this.invitationCode = 'guangdiantong0508';
					_this.saveJumpUrl(finallyUrl) // 缓存跳转路径 登录后即可跳转
					_this.goLogin()
				} else {
					// 已登录并拥有跳转路径
					uni.navigateTo({
						url: finallyUrl
					})
					_this.saveJumpUrl('')
				}
			}

			// 页面方案
			if (options.wearPlanId || uni.getStorageSync('wearPlanId') !== '') {
				console.log("页面收到方案ID 查询并显示", options.wearPlanId)
				if (!_this.hasLogin) {
					_this.saveWearPlanOrderId(options.wearPlanId) // 缓存分享方案的orderId 登录后即显示
					// console.log("存储方案订单ID", uni.getStorageSync('wearPlanId'))
					_this.goLogin()
				} else {
					let id = options.wearPlanId || uni.getStorageSync('wearPlanId')
					// 已登录并拥有跳转路径
					let data = {
						id: id
					}
					_this.$u.api.findSchemeById(data).then(res => {
						if (res.code === 200) {
							_this.imgs = []
							_this.descs = []
							_this.shareData = res.data
							_this.shareData.content = JSON.parse(res.data.content)
							uni.removeStorageSync('wearPlanId')

							for (let i in _this.shareData.content) {
								_this.imgs.push("https://posting.imguangguang.com/" + _this.shareData.content[i][0].photo)
								_this.descs.push(_this.shareData.content[i][0].introduce)
							}
							_this.$refs.previewImage.open(0); // 传入当前选中的图片地址或序号
						}
					})
				}
			}
			
			// 首次进入介绍弹窗
			// if (isBlank(uni.getStorageSync('firstIn_ModaMini'))) {
			// 	_this.introduceVisible = true
			// }
		},
		// 页面初次渲染完成
		onReady() {
			let that = this;
			uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
				success(res) { //成功回调函数
					that._data.pH = res.windowHeight //windoHeight为窗口高度，主要使用的是这个
					let titleH = uni.createSelectorQuery().select(".map_area"); //想要获取高度的元素名（class/id）
					titleH.boundingClientRect(data => {
						let pH = that._data.pH;
						that._data.navHeight = pH - data.top //计算高度：元素高度=窗口高度-元素距离顶部的距离（data.top）
					}).exec()
				}
			})

			that.mapContext = uni.createMapContext('map');

			// ToolTip
			if (isBlank(uni.getStorageSync('hasInfirst_User'))) {
				that.tooltipShow = true
				// 5s后自动关闭
				setTimeout(function() {
					that.sortTooltipClick();
				}, 5000);
			}
		},
		onHide() {
			if (this.userInfo.role === 1) {
				// 清空定时器
				this.timer = clearInterval(this.timer)
				this.listTimer = clearInterval(this.listTimer)
				this.stylistTimer = clearInterval(this.stylistTimer)
				this.stopOrder()
			}

			// 清除EventBus
			eventBus.$off('onNewOrder', {})
		},
		onShow() {
			var _this = this;

			// 未读消息数
			var count = uni.getStorageSync('unReadCount') || 0
			_this.msgCount = count

			// 每次进入页面判断是否选择角色（已登录）
			if (_this.hasLogin === true) {
				// 每次进入刷新用户信息
				_this.$u.api.getUser().then(res => {
					if (res.code === 200) {
						_this.getUser(res.data)
					}
				})

				// 每次进入获得保存在本地的用户信息
				uni.getStorage({
					key: 'userInfo',
					success: (res) => {
						if (res.data.role === null) {
							uni.navigateTo({
								url: '../login/register'
							})
							uni.showToast({
								title: "请先选择您的角色",
								icon: "none"
							})
						}
						// console.log("当前角色:", res.data.role)
						if (res.data.role === 1) {
							// 搭配师查询我的流水和我的订单
							_this.todayOrderAndIncome()
							_this.stopOrder()
						} else if (res.data.role === 0) {
							// 用户获取我当前正在制作的搭配方案
							_this.getMyWearingOrder()
						}
					}
				});
			}

			// 检测极光登录状态
			this.checkImStatus();

			// 保持屏幕常亮
			uni.setKeepScreenOn({
				keepScreenOn: true
			});
		},
		methods: {
			...mapMutations(['getUser', 'saveJumpUrl', 'saveWearPlanOrderId']),
			// 首次进入弹窗
			firstUserKnow() {
				this.introduceVisible = false
				uni.setStorageSync('firstIn_ModaMini', true)
			},
			/* 地图操作 */
			// 位置授权
			getAuthorizeInfo() {
				const _this = this
				uni.authorize({
					scope: 'scope.userLocation',
					success() { // 允许授权
						_this.getLocation();
					},
					fail() { // 拒绝授权
						_this.openConfirm();
						console.log("你拒绝了授权，无法获得周边信息")
					}
				})
			},
			// 授权确认
			openConfirm() {
				const _this = this
				uni.showModal({
					title: '请求授权当前位置',
					content: '需要获取您的地理位置，请确认授权',
					success: (res) => {
						if (res.confirm) {
							uni.openSetting({
								success(res) {
									_this.getLocation()
								}
							});; // 打开地图权限设置
						} else if (res.cancel) {
							uni.showToast({
								title: '你拒绝了授权，无法获得周边信息, 相关功能将无法使用',
								icon: 'none',
								duration: 1000
							})
						}
					}
				});
			},
			// 获取地理位置
			getLocation() {
				const _this = this
				const QQMapWX = new qqmapsdk({
					key: 'P27BZ-SGH6R-XRFWN-WKNK6-UGBXV-CXFH5'
				});
				this.QQMapWX = QQMapWX

				uni.showLoading({
					title: "正在加载地图"
				})

				uni.getLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					success: function(res) {
						console.log('当前经纬度', res);
						const latitude = res.latitude;
						const longitude = res.longitude;
						_this.latitude = latitude
						_this.longitude = longitude

						// 解析地址
						QQMapWX.reverseGeocoder({
							location: {
								latitude: latitude,
								longitude: longitude
							},
							success: function(res) {
								// console.log('地图成功解析地址', res);
								let city = res.result.ad_info.city;
								_this.city = city

								// 存储用户经纬度城市
								if (_this.hasLogin === true) {
									var data = {
										city: res.result.ad_info.city,
										latitude: latitude,
										longitude: longitude
									}
									_this.$u.api.editUser(data).then(res => {
										if (res.code === 200) {
											// 保存用户信息
											let userInfo = uni.getStorageSync('userInfo')
											userInfo.city = data.city
											userInfo.latitude = data.latitude
											userInfo.longitude = data.longitude
											_this.getUser(userInfo)
										}
									})
								}
								// console.log(_this.covers)
								uni.hideLoading()
							},
							fail: function(res) {
								uni.hideLoading()
								uni.showToast({
									title: '定位失败, 请重新获取定位',
									duration: 2000,
									icon: 'none'
								});
								console.log(res);
							}
						});
						_this.showMarks();
					}
				});
			},
			// 地图点击事件
			clickMap(e) {
				this.jumpPoint(e.detail.latitude,e.detail.longitude)
			},
			// 位置标点移动
			jumpPoint(latitude, longitude) {
				this.latitude = latitude
				this.longitude = longitude
				let hasPoint = false
				let pointIndex = 0
				for(let i in this.covers) {
					if(this.covers[i].id === 'clickPoint') {
						// 已拥有则替换
						pointIndex = i
						hasPoint = true
					}else {
						hasPoint = false
					}
				}
				
				if(hasPoint) {
					this.covers[pointIndex].latitude = latitude
					this.covers[pointIndex].longitude = longitude
				}else {
					this.covers.push({
						latitude: latitude,
						longitude: longitude,
						iconPath: '/static/img/market_location.png',
						width: 20,
						height: 26,
						id: 'clickPoint',
						callout: { //自定义标记点上方的气泡窗口 点击有效
							content: '选中位置', //文本
							color: '#333333', //文字颜色
							fontSize: 10, //文本大小
							padding: 5,
							borderRadius: 5, //边框圆角
							bgColor: '#FFFFFF', //背景颜色
							display: 'ALWAYS', //常显
						},
					});
				}
			},
			// 返回定位
			backMylocation() {
				const _this = this
				_this.mapContext.moveToLocation();
				uni.getLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					success: function(res) {
						const latitude = res.latitude;
						const longitude = res.longitude;
						_this.latitude = latitude
						_this.longitude = longitude
						// 清除定位点
						_this.covers = []
						_this.showMarks()
					}
				});
			},
			// 地图返回定位位置初始化
			handleRegionChange(e) {
				var _this = this
				if (e.type === 'end' && e.causedBy === 'drag') { //是判断拖拽 放开鼠标后的当前位置
					_this.mapContext.getCenterLocation({ //getCenterLocation获取当前地图中心的经纬度，返回的是 gcj02 坐标系
						success: res => {
							const {
								longitude,
								latitude
							} = res;
							_this.showMarks()
						}
					});
				}
			},
			// 防抖刷新搭配师随机方位
			debounce(fn, delay, isImmediate) {
				var timer = null; //初始化timer，作为计时清除依据
				return function() {
					var context = this; //获取函数所在作用域this
					var args = arguments; //取得传入参数
					clearTimeout(timer);
					if (isImmediate && timer === null) {
						//时间间隔外立即执行
						fn.apply(context, args);
						timer = 0;
						return;
					}
					timer = setTimeout(function() {
						fn.apply(context, args);
						timer = null;
					}, delay);
				}
			},
			// 显示周围附近搭配师
			showMarks() {
				if (this.userInfo.role === 1) {
					return;
				}
				let context = this;
				//获取中心坐标, 随机绘制markers
				if (context.mapContext == null) {
					context.mapContext = uni.createMapContext("map", this);
				}
				context.mapContext.getCenterLocation({
					success: (res) => {
						let clickPointCovers = {}
						for(let i in context.covers) {
							if(context.covers[i].id === 'clickPoint') {
								clickPointCovers = context.covers[i]
							}
						}
						
						context.covers = [];
						if(clickPointCovers.id) {
							// 有点击位置的标点则继续加入
							context.covers.push(clickPointCovers)
						}
						
						// 开始计算搭配师头像位置
						var count = Math.floor((Math.random() * 10) + 1);
			
						for (var i = 0; i < count; i++) {
							let rx = Math.floor((Math.random() * 35) + 1) + 6;
							let ry = Math.floor((Math.random() * 35) + 1) + 6;
			
							let imgCount = Math.floor((Math.random() * 22) + 1);
							if (imgCount < 10) {
								imgCount = "0" + imgCount.toString()
							}
			
							let latitude1 = (rx % 2 == 0 ?
								(res.latitude + rx / 10000) :
								(res.latitude - rx / 10000)); //根据商场随机一个搭配师出来,坐标在商场的基础上随机加减随机数
							let longitude1 = (rx % 2 == 0 ?
								(res.longitude + ry / 10000) :
								(res.longitude - ry / 10000)); //根据商场随机一个搭配师出来,坐标在商场的基础上随机加减随机数
			
							context.covers.push({
								latitude: latitude1,
								longitude: longitude1,
								iconPath: 'https://posting.imguangguang.com/Moda_map_Stylist' + imgCount + '.png',
								width: 23,
								height: 28,
								id: i
							}); // 多个随机搭配师头像
						}
						// console.log(context.covers);
					}
				})
			},
			/* 地图操作 === end */
			// 获取轮播数据
			getList() {
				var that = this
				that.listTimer = clearInterval(that.listTimer)

				that.$u.api.findNearOrders().then(res => {
					if (res.code === 200) {
						that.list = res.data
					}
					// 放入弹幕 5s取一条
					if (that.userInfo.role === 1) {
						that.listTimer = setInterval(() => {
							let index = that.getRandomNumberByRange(0, that.list.length - 1);
							that.$refs.lffBarrage.add({
								item: that.list[index]
							});
						}, 5000)
					}
				});
			},
			// 获取两个数之间的随机整数
			getRandomNumberByRange(start, end) {
				return Math.floor(Math.random() * (end - start) + start)
			},
			// 选择搭配师等级
			selectStylistLevel(index) {
				this.$nextTick(function() {
					for (let i = 0; i < this.levelList.length; i++) {
						if (index === i) {
							this.levelList[i].selected = true
							this.stylistLevel = this.levelList[i].stylistLevelValue
							this.stylistLevelName = this.levelList[i].levelName
							this.stylistMoney = this.selectOrderType === 0 ? this.levelList[i].onlinePrice : this.levelList[i].offlinePrice
						} else {
							this.levelList[i].selected = false
						}
					}
				})
			},
			// 选择订单类型
			sectionChange(index) {
				if (this.hasLogin === false) {
					uni.showToast({
						title: "请您登录",
						icon: "none"
					});
					this.goLogin()
					return false
				}

				// if(index === 1) {
				// 	uni.showToast({
				// 		title: "暂未开通线下订单",
				// 		icon: "none"
				// 	});
				// 	index = 0
				// 	this.$refs.selectOrderType.click(0)
				// }

				this.selectOrderType = index;
			},
			// 选择搭配师等级
			openSelectStylistLevel() {
				if (this.hasLogin === false) {
					uni.showToast({
						title: "请您登录",
						icon: "none"
					});
					this.goLogin()
					return false
				}

				if (this.levelList.length === 0) {
					this.getStylistData()
				}

				// 重置选中状态
				this.stylistLevel = null // 选中的搭配师等级
				this.stylistLevelName = '' // 选中的搭配师名称
				this.stylistMoney = 0 // 选中搭配师的金额
				for (let i in this.levelList) {
					this.levelList[i].selected = false
				}

				if (this.selectOrderType === 1) {
					// 重置选择步骤
					this.hasFinishOneStep = false
					// 线下订单
					this.timeLength = 2 // 最少小时
					this.$forceUpdate()
				}

				this.stylistShow = true
			},
			// 线下订单时长输入
			handleCountClick(val, index) {
				this.timeLength = val
			},
			getStylistData() {
				// 获取搭配师列表
				this.$u.api.getStylistLevels().then(res => {
					if (res.code === 200) {
						this.levelList = res.data
						for (let i in this.levelList) {
							this.levelList[i].selected = false
						}
					}
				})
			},
			// 用户创建穿搭方案订单
			createWearSchemeOrder() {
				if (this.stylistLevel === null) {
					uni.showToast({
						icon: 'none',
						title: '请先选择搭配师等级'
					})
					return false
				}

				if (this.userOrderShow) {
					uni.showToast({
						icon: 'none',
						title: '您已下单,请先取消订单'
					})
					return false
				}

				if (this.selectOrderType === 1) {
					// 线下订单 选择商城
					if (!this.hasFinishOneStep) {
						this.hasFinishOneStep = true
					} else {
						if (isBlank(this.marketId)) {
							uni.showToast({
								icon: 'none',
								title: '请先选择商场'
							})
							return false
						}

						var data = {
							stylistLevel: this.stylistLevel,
							timeLength: this.timeLength,
							marketId: this.marketId
						}

						this.$u.api.createOrder(data).then(res => {
							if (res.code === 200) {
								this.orderData = res.data // 用戶方订单数据 接口返回订单号
								uni.showToast({
									title: "发布订单成功,搭配师正在路上",
									icon: "none"
								});
								this.stylistShow = false
								// loading 
								this.addMoney = null
								this.userOrderShow = true
								// 计时器
								this.startHandler()
								// 打开消息监听
								eventBus.$on('onOrderReceived', customMsgObj => {
									console.log("有搭配师接受您的订单", customMsgObj)
									this.userOrderShow = false
									// 进入订单详情 确定付款
									uni.navigateTo({
										url: '/pages/order/order_list/order_detail?orderNo=' + customMsgObj.orderNo
									})
								});
							}
						})
					}
				} else {
					// 线上订单
					var data = {
						city: this.userInfo.city,
						latitude: this.userInfo.latitude,
						longitude: this.userInfo.longitude,
						schemeType: 1,
						stylistLevel: this.stylistLevel
					}
					this.$u.api.createWearSchemeOrder(data).then(res => {
						if (res.code === 200) {
							this.orderData = res.data // 接口返回订单号
							uni.showToast({
								title: "发布订单成功,搭配师正在路上",
								icon: "none"
							});
							this.stylistShow = false
							// loading 
							this.addMoney = null
							this.userOrderShow = true
							// 计时器
							this.startHandler()
							// 打开消息监听
							eventBus.$on('onOrderReceived', customMsgObj => {
								console.log("有搭配师接受您的订单", customMsgObj)
								this.userOrderShow = false
								// 进入订单详情 确定付款
								uni.navigateTo({
									url: '/pages/order/order_list/order_detail?orderNo=' + customMsgObj.orderNo
								})
							});
						}
					})
				}
			},
			// 开始正向计时
			startHandler() {
				// 初始化时间
				this.currentTime = 0
				this.stylistTimeData = {
					myHours: '00',
					myMinutes: '00',
					mySeconds: '00'
				}
				this.timeObj = null

				this.stylistTimer = setInterval(() => {
					this.timeFunction();
				}, 1000)
			},
			timeFunction() {
				// 开始执行倒计时
				this.timeObj = { // 时间对象
					seconds: Math.floor(this.currentTime % 60),
					minutes: Math.floor(this.currentTime / 60) % 60,
					hours: Math.floor(this.currentTime / 60 / 60) % 24
				}
				// 计算出时分秒
				this.stylistTimeData.myHours = this.timeObj.hours < 10 ? '0' + this.timeObj.hours : this.timeObj.hours;
				this.stylistTimeData.myMinutes = this.timeObj.minutes < 10 ? '0' + this.timeObj.minutes : this.timeObj.minutes;
				this.stylistTimeData.mySeconds = this.timeObj.seconds < 10 ? '0' + this.timeObj.seconds : this.timeObj.seconds;
				this.currentTime++;
			},
			// 用戶取消订单
			cancelOrder() {
				var data = {
					orderNo: this.orderData
				}
				this.$u.api.cancelOrder(data).then(res => {
					if (res.code === 200) {
						this.stylistTimer = clearInterval(this.stylistTimer)
						uni.showToast({
							title: "订单已取消",
							icon: "none"
						});
						this.userOrderShow = false
					}
				})
			},
			// 用户加价订单
			addPrice() {
				if (isBlank(this.addMoney)) {
					uni.showToast({
						title: "请输入正确的加价金额",
						icon: "none"
					});
					return false
				}

				var data = {
					orderNo: this.orderData,
					addPrice: Number(this.addMoney)
				}

				this.$u.api.addPrice(data).then(res => {
					if (res.code === 200) {
						this.stylistMoney = Number(this.stylistMoney) + Number(this.addMoney)
						this.addMoney = null
						uni.showToast({
							title: "加价成功",
							icon: "none"
						});
					}
				})
			},
			// 跳转路由
			toPage(page) {
				if (this.hasLogin === false) {
					uni.showToast({
						title: "请您登录",
						icon: "none"
					});
					this.goLogin()
					return false
				}

				if (page === "coupon") {
					uni.showToast({
						title: "暂无优惠券",
						icon: "none"
					});
				} else if (page === "message") {
					uni.navigateTo({
						url: '/pagesB/pages/chat/msg'
					})
				} else if (page === 'my') {
					// 分为角色和搭配师
					if (this.userInfo.role === 0) {
						uni.navigateTo({
							url: '../../pagesB/pages/my/indexUser'
						})
					} else {
						uni.navigateTo({
							url: '../../pagesB/pages/my/indexStylist'
						})
					}
				} else if (page === 'help') {
					uni.navigateTo({
						url: '/pagesB/pages/settings/HelpPage'
					})
				} else if (page === 'changeRole') {
					uni.setStorageSync('hasInfirst_User', true)
					this.tooltipShow = false
					this.changeRole()
				} else if (page === 'order') {
					uni.navigateTo({
						url: '/pages/order/order_list/order_list'
					})
				} else if (page === 'regis') {
					uni.navigateTo({
						url: '/pages/stylist/regisist'
					})
				}
			},
			// 更换角色
			changeRole() {
				if (this.userInfo.role === 0) {
					if (this.userOrderShow) {
						this.cancelOrder() // 用户端取消订单
					}
					this.roleChangeTitle = "您确定要切换成搭配师角色吗？"
				} else if (this.userInfo.role === 1) {
					this.stopOrder() // 搭配师端停止接单
					this.roleChangeTitle = "您确定要切换成用户角色吗？"
				}
				this.changeRoleShow = true
			},
			changeRoleConfirm() {
				var role;
				if (this.userInfo.role === 0) {
					role = 1
				} else if (this.userInfo.role === 1) {
					role = 0
				}

				var data = {
					role: role
				}

				this.$u.api.changeRole(data).then(res => {
					if (res.code === 200) {
						let userInfo = uni.getStorageSync('userInfo')
						userInfo.role = role
						this.getUser(userInfo)
						// 清空定时器
						this.timer = clearInterval(this.timer)
						this.listTimer = clearInterval(this.listTimer)
						this.stylistTimer = clearInterval(this.stylistTimer)
						uni.reLaunch({
							url: '../order/placeOrderIndex'
						})
					}
				})
			},
			// toolTip 点击
			sortTooltipClick() {
				uni.setStorageSync('hasInfirst_User', true)
				this.tooltipShow = false
			},
			// uni.login临时登录凭证code去登录
			goLogin() {
				uni.login({
					provider: 'weixin',
					success: (res) => {
						if (!isBlank(this.invitationCode)) {
							uni.navigateTo({
								url: '../login/login?code=' + res.code + '&invitationCode=' + this.invitationCode
							})
						} else {
							uni.navigateTo({
								url: '../login/login?code=' + res.code
							})
						}
					},
					fail: () => {
						uni.showToast({
							title: "微信登录授权失败",
							icon: "none"
						});
					}
				})

			},
			// 搭配师首页订单流水数据
			todayOrderAndIncome() {
				this.$u.api.todayOrderAndIncome().then(res => {
					if (res.code === 200) {
						this.orderNum = res.data.orderNum
						this.income = res.data.income
					}
				})
			},
			// 开启接单
			getOrder() {
				if (this.userInfo.realRole === 0 && this.userInfo.role === 1) {
					// 尚未注册的搭配师
					this.$refs.uToast.show({
						title: '尚未成为认证搭配师',
						type: 'default',
						url: '/pages/stylist/regisist',
						duration: '500'
					})
					return false
				}

				// 更改监听状态
				var data = {
					listenStatus: 1 // 0:停止接单, 1:开始接单
				}
				this.$u.api.changeListening(data).then(res => {
					if (res.code === 200) {
						this.listenStatus = 1
						uni.showToast({
							title: "正在开始听单"
						});

						// 第一次听单 5-10s
						var customMsgObj = {
							endTime: Math.floor(Math.random() * 4), // 随机10-15s关闭
							placeName: this.city,
							orderType: 2,
							price: 9.9,
							orderNo: "假订单"
						}
						this.orderData = customMsgObj

						// 第一单随机3-10s假订单
						var min = 3;
						var max = 10;
						var rand = Math.floor(Math.random() * (max - min + 1)) + min;

						var timer = setTimeout(function() {
							// 开启第一次默认订单
							eventBus.$emit('onNewOrder', customMsgObj);
							clearTimeout(timer);
						}, rand * 1000)

					}
				})
			},
			/* 
			  倒计时30s
			  time 结束的时间 
			*/
			settime(time) {
				var _this = this
				_this.orderTime = 30;
				var endTime = time
				_this.timer = setInterval(function() {
					if (_this.orderTime === 30 - endTime) {
						_this.closeOrder()
						if (endTime !== 0) {
							uni.showToast({
								icon: 'none',
								title: '手慢啦~该订单已被其他搭配师截获'
							})
						}
					} else {
						_this.orderTime = _this.orderTime - 1;
					}
				}, 1000)
			},
			// 停止监听订单
			stopOrder() {
				// 更改监听状态
				var data = {
					listenStatus: 0 // 0:停止接单, 1:开始接单
				}
				this.$u.api.changeListening(data).then(res => {
					if (res.code === 200) {
						this.listenStatus = 0
						this.closeOrder()
					}
				})
			},
			// 搭配师接单
			receiveOrder() {
				var data = {
					orderNo: this.orderData.orderNo
				}

				let name = this.orderData.niceName
				let imUser = this.orderData.imUser
				let face = this.orderData.face

				this.$u.api.receiveOrder(data).then(res => {
					if (res.code === 200) {
						// 成功抢到订单 进入消息页
						this.closeOrder()
						uni.navigateTo({
							url: '/pagesB/pages/chat/chat?name=' + name + '&imUser=' + imUser + '&face=' + face
						})
					} else {
						// 订单被抢了（假订单）
						this.closeOrder()
					}
				})
			},
			// 关闭订单弹窗
			closeOrder() {
				this.orderShow = false
				this.timer = clearInterval(this.timer);
			},
			checkImStatus() { //极光IM偶尔会出现没有初始化的情况,在每次重新进入主页时检测一下,如果没有初始化则重新初始化
				let isInit = main.jim.isInit();
				// console.log("检测极光是否初始化", isInit);
				if (isInit) return;
				let random_str = 'lksdjflk134kljdfkljd'; //随机字符串
				let timestamp = Date.parse(new Date()).toString(); //时间戳
				main.jim.init({
					"appkey": "c1b05213e3b0d22b353a4216",
					"random_str": random_str,
					"signature": md5.md5('appkey=c1b05213e3b0d22b353a4216&timestamp=' + timestamp + '&random_str=' + random_str +
						'&key=0696c2ff847dd598853ea434'),
					"timestamp": timestamp
				}).onSuccess(function(data) {
					console.log('极光IM重新初始化成功');
					const userInfo = uni.getStorageSync("userInfo");
					if (userInfo) {
						//登录IM账号
						main.jim.login({
							'username': userInfo.imUser,
							'password': userInfo.imPwd,
							'is_md5': false
						}).onSuccess(function(data) {
							console.log('极光IM登录成功');
							app.globalData.jmLogin = true
							eventBus.$emit('listenLogin');
						}).onFail(function(data) {
							//同上
							console.log('极光IM登录出错-->', data);
						});
					}
					//TODO
				}).onFail(function(data) {
					console.log('极光IM重新初始化出错-->', data);
				});
			},
			// 获取当前订单数
			getMyWearingOrder() {
				var data = {
					role: 0 // 0:用户角色, 1:搭配师角色
				}
				this.$u.api.getMakingSchemeCount(data).then(res => {
					if (res.code === 200) {
						this.wearingNum = res.data
					}
				})
			},
			// 跳转选择商场
			jumpSelectMarket() {
				var _this = this
				uni.getSetting({
					success(res) {
						if (!res.authSetting['scope.userLocation']) { //3.1 每次进入程序判断当前是否获得授权，如果没有就去获得授权，如果获得授权，就直接获取当前地理位置
							_this.getAuthorizeInfo()
						} else {
							uni.navigateTo({
								url: '/pagesB/pages/addressSearch/addressSearch'
							})
						}
					}
				});
			},
			// 方案打开事件
			longPress(data) {
				var _this = this;
				var src = data.src;

				uni.showModal({
					title: '提示',
					content: '是否要保存该方案图片',
					success: function(res) {
						if (res.confirm) {
							uni.authorize({
								scope: 'scope.writePhotosAlbum',
								success() {
									_this.downloadImg(src);
								}
							});
						}
					}
				});
			},
			//下载并保存文件
			downloadImg(src) {
				//下载图片文件
				uni.showLoading({
					title: '大图提取中'
				});
				uni.downloadFile({
					url: src,
					success: function(res) {
						uni.hideLoading();
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: () => {
								uni.showToast({
									title: '已保存至相册',
									duration: 1000
								});
							}
						});
					},
					fail: function() {
						uni.hideLoading();
						uni.showToast({
							title: '图片下载失败',
							icon: 'none',
							duration: 1000
						});
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		position: relative;
		background-color: #F7F8FA;
		height: 100%;
	}

	// 自定义导航栏
	.slot-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex: 1;
		padding: 0 30rpx;
		width: 100vw;

		.left_img {
			width: 35upx;
			height: 36upx;
		}

		.title {
			padding-right: 30rpx;
			font-weight: bold;
			font-size: 34upx;
		}

		.nav_img {
			width: 134upx;
			height: 40upx;
			margin: 0 auto;
			padding-right: 67upx;
		}

		.nav_img2 {
			width: 134upx;
			height: 40upx;
			margin: 0 auto;
		}
	}

	// 地图区域
	.map_area {
		background: #F7F8FA;
		position: relative;
		// height: calc(100vh - 44px);
		width: 100vw;

		cover-view,
		cover-image {
			display: inline-block;
		}

		.notice_area {
			position: absolute;
			left: 28upx;
			right: 32upx;
			border-radius: 12upx;
			z-index: 10;

			.stylist_top_area {
				background: white;
				margin-bottom: 16upx;
				border-radius: 12upx;
				height: 180upx;

				.left {
					flex: 0.5;
					height: 100%;
				}

				.right {
					flex: 0.5;
					height: 100%;
				}

				.name {
					color: #333333;
				}
			}
		}

		.subsection_area {
			position: absolute;
			left: 30upx;
			right: 30upx;
			top: 81upx;
			z-index: 10;

			.wearing_area {
				background: rgba(17, 17, 17, 0.39);
				border-radius: 23upx;
				margin-top: 12upx;
				color: white;
				font-size: 22rpx;
				font-weight: 400;
				margin: 12upx auto;
				padding: 8upx 16upx;
				width: 454upx;
				text-align: center;
			}
		}


		.help_area {
			width: 69upx;
			height: 70upx;
			background: #FFFFFF;
			border-radius: 20upx 0 0 20upx;
			position: absolute;
			right: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 10;
		}

		.right_area {
			width: 70upx;
			height: 306upx;
			position: absolute;
			right: 30upx;
			justify-content: space-between !important;
			z-index: 10;

			.dot {
				width: 20upx;
				height: 20upx;
				background: #F65956;
				border-radius: 50%;
				position: absolute;
				right: 0;
				top: 0;
				z-index: 5;
			}
		}

		.bottom_area {
			display: flex;
			align-items: flex-start;
			flex-direction: column;
			justify-content: flex-start;
			position: absolute;
			left: 30upx;
			right: 30upx;
			bottom: 145upx;
			z-index: 10;

			.regis_area {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				width: 290upx;
				height: 77upx;
				background: url(../../static/img/index_regisisBg.png) no-repeat;
				background-size: 100% 100%;
				margin-bottom: 12upx;
				padding: 8upx 20upx;

				&_title {
					color: #FFFFFF;
					font-weight: 400;
					font-size: 24upx;
				}

				&_content {
					color: #8391D8;
					font-weight: 400;
					font-size: 20upx;
				}
			}

			.login_tip {
				width: 660upx;
				height: 70upx;
				background: #F97471;
				border-radius: 40upx 40upx 0 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20upx 40upx 20upx 20upx;
				margin: 0 auto;

				.content {
					margin-left: 10upx;
					font-size: 28upx;
					font-weight: bold;
					color: #FFFFFF;
				}

				.btn {
					height: 50upx;
					line-height: 50upx;
					padding: 0 24upx;
					background: white;
					font-size: 24upx;
					font-weight: bold;
					color: #666666;
					border-radius: 12upx;
					margin: 0;
				}
			}

			.tip_box {
				width: 690upx;
				height: 50upx;
				border-radius: 12upx;
				padding: 3upx 16upx 4upx 16upx;
				background: white;

				.content {
					padding-left: 12upx;
					font-size: 24upx;
					font-weight: 400;
					color: #666666;
				}
			}

			.select_StylistLevel_area {
				width: 690upx;
				height: 108upx;
				background: white;
				border-radius: 54upx;
				margin-top: 12upx;
				padding: 24upx;

				.content {
					margin-left: 16upx;
					font-size: 36upx;
					font-weight: 400;
					color: #555555;
				}
			}
		}

		.bottom_getOrder_area {
			position: absolute;
			left: 245upx;
			right: 245upx;
			bottom: 171upx;
			width: 246upx;
			height: 246upx;
			border-radius: 50%;
			background: rgba(246, 89, 86, 0.98);
			box-shadow: 0 1upx 9upx 0 #F65C59;
			text-align: center;
			line-height: 246upx;
			color: white;
			font-weight: bold;
			font-size: 36upx;
			-webkit-animation: ani 2s linear infinite;
		}

		.bottom_getOrder_area_stop {
			position: absolute;
			left: 245upx;
			right: 245upx;
			bottom: 171upx;
			width: 246upx;
			height: 246upx;
			border-radius: 50%;
			text-align: center;
			line-height: 246upx;
			color: white;
			font-weight: bold;
			font-size: 36upx;
		}

		// 按钮微光
		@keyframes ani {
			0% {
				box-shadow: 0 0 0px #F65C59
			}

			25% {
				box-shadow: 0 0 10px #F65C59
			}

			50% {
				box-shadow: 0 0 20px #F65C59
			}

			75% {
				box-shadow: 0 0 10px #F65C59
			}

			100% {
				box-shadow: 0 0 0px #F65C59
			}
		}
	}

	// 底部弹出层
	.bottomSheet_content {
		margin: 28rpx 45rpx 0 45rpx;
		display: flex;
		flex-direction: column;

		.title {
			font-size: 36upx;
			font-weight: bold;
			color: #333333;
			margin-top: 13upx;
			text-align: center;
		}

		.list-cell {
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			width: 100%;
			padding: 30upx 0 30upx 5upx;
			overflow: hidden;
			color: #666666;
			font-size: 28upx;
			font-weight: bold;
			color: #111111;
		}

		.originalPrice {
			font-size: 24rpx;
			font-weight: 400;
			text-decoration: line-through;
			color: #FF7564;
		}

		.tip {
			font-size: 22upx;
			font-weight: bold;
			color: #555555;
		}

		.lgbtn {
			margin: 30upx auto;
			width: 368upx;
			height: 90upx;
		}

		// 商城选择
		.market_box {
			margin-top: 20upx;

			&_top {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.name {
					font-size: 32rpx;
					font-weight: bold;
					color: #666666;
					margin-left: 23upx;
				}

				text {
					font-size: 28rpx;
					font-weight: bold;
					color: #666666;
				}
			}

			.location {
				margin: 60upx auto;
				height: 128upx;
				background: #F3F3F3;
				border-radius: 12upx;
				display: flex;
				align-items: center;
				padding: 20upx;

				.dot {
					width: 16upx;
					height: 16upx;
					background: #616161;
					border-radius: 50%;
				}

				.text {
					padding-left: 16upx;
					font-size: 32upx;
					font-weight: bold;
					color: #666666;
				}
			}
		}
	}

	// 订单弹出层(用户端)
	.warp {
		position: absolute;
		left: 30rpx;
		right: 30rpx;
		top: 173upx;
		background: #FFFFFF;
		z-index: 100;
		border-radius: 16rpx;
		padding: 20upx 20upx 20upx 20upx;

		// 用户订单寻找搭配师loading层
		.rect_user {
			background: #FFFFFF;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;

			.left_area_user {
				display: flex;
				flex-direction: column;
			}

			.right_area_user {
				display: flex;
				flex-direction: column;

				.time {
					color: #666666;
					font-size: 32upx;
					font-weight: bold;
				}
			}

			.tip {
				font-size: 28upx;
				font-weight: 500;
				color: #909090;
				margin-bottom: 12upx;
			}


			.cancel {
				text-align: center;
				width: 108upx;
				height: 45upx;
				margin-top: 10rpx;

				button {
					background-color: #F4F4F4 !important;
					color: #666666 !important;
					width: 100%;
					height: 100%;
					line-height: 45upx;
					font-size: 24upx;
					border: none
				}
			}

		}

		// 加价区域
		.addPrice_box {
			margin-top: 24upx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			text {
				font-size: 24rpx;
				font-weight: 400;
				color: #666666;
			}

			input {
				width: 80rpx;
				padding: 6rpx 12rpx;
				text-align: center;
				border-bottom: 1px solid #d8d8d8;
				margin: 0 5rpx;
			}

			.addmoney_box {
				padding: 3upx 15upx 4upx 15rpx;
				margin: 0 8upx;
				font-size: 24rpx;
				color: #666666;
				border-radius: 20rpx;
				border: 1px solid #979797;
			}

			.addPrice {
				text-align: center;
				width: 76upx;
				height: 40upx;

				button {
					background-color: #F4F4F4 !important;
					color: #666666 !important;
					width: 100%;
					height: 100%;
					line-height: 40upx;
					font-size: 22upx;
					border: none
				}
			}
		}

		// 底部提示
		.bottom_tip {
			margin-top: 8upx;
			font-size: 24upx;
			font-weight: 400;
			color: #999999;
		}

		// 搭配师接受订单
		.rect {
			width: 564upx;
			height: 376upx;
			border-radius: 16upx;
			background-color: #fff;
			padding: 32upx 20upx 25upx 20upx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;

			.top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				margin-bottom: 12upx;

				.left {
					font-size: 30upx;
					font-weight: 400;
					color: #000000;
				}

				.right {
					font-size: 28upx;
					color: #666666;
				}
			}

			.middle {
				margin: 24upx auto;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 194upx;
				height: 194upx;
				background: rgba(246, 89, 86, 0.98);
				border-radius: 50%;
				font-size: 48upx;
				font-weight: bold;
				color: #FFFFFF;
			}

			.bottom {
				font-size: 26upx;
				font-weight: bold;
				color: #999999;
			}
		}

		.stopText {
			margin-top: 36upx;
			font-size: 26upx;
			font-weight: 400;
			color: #FFFFFF;
		}
	}

	// 订单弹出层(搭配师端)
	.warp_stylist {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		flex-direction: column;

		// 用户订单寻找搭配师loading层
		.rect_user {
			width: 468upx;
			// height: 366upx;
			background: #FFFFFF;
			border-radius: 16px;
			padding: 40upx 52upx 40upx 52upx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.tip {
				font-size: 28upx;
				font-weight: 500;
				color: #909090;
				margin-top: 54upx;
			}

			.cancel {
				margin-top: 54upx;
				text-align: center;

				button {
					background-color: #D4D4D4 !important;
					color: white !important;
				}
			}
		}


		// 搭配师接受订单
		.rect {
			width: 564upx;
			height: 376upx;
			border-radius: 16upx;
			background-color: #fff;
			padding: 32upx 20upx 25upx 20upx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;

			.top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				margin-bottom: 12upx;

				.left {
					font-size: 30upx;
					font-weight: 400;
					color: #000000;
				}

				.right {
					font-size: 28upx;
					color: #666666;
				}
			}

			.middle {
				margin: 24upx auto;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 194upx;
				height: 194upx;
				background: rgba(246, 89, 86, 0.98);
				border-radius: 50%;
				font-size: 48upx;
				font-weight: bold;
				color: #FFFFFF;
			}

			.bottom {
				font-size: 26upx;
				font-weight: bold;
				color: #999999;
			}
		}

		.stopText {
			margin-top: 36upx;
			font-size: 26upx;
			font-weight: 400;
			color: #FFFFFF;
		}
	}


	// 选择搭配师 圆点动画
	.ripple {
		box-sizing: border-box;
		position: relative;
	}

	.ripple:before {
		animation: ripple 2s ease-out infinite;
		border: solid 8rpx #333333;
		border-radius: 50%;
		bottom: 0;
		box-sizing: border-box;
		content: "";
		left: 0;
		position: absolute;
		right: 0;
		top: 0;
	}

	.ripple:after {
		animation: ripple 2s 1s ease-out infinite;
		border: solid 8rpx #333333;
		border-radius: 50%;
		bottom: 0;
		box-sizing: border-box;
		content: "";
		left: 0;
		position: absolute;
		right: 0;
		top: 0;
	}

	@keyframes ripple {
		0% {
			opacity: .35;
		}

		100% {
			border-radius: 50%;
			opacity: 0;
			transform: scale(3);
		}
	}

	// 介绍弹窗
	.introduct_popue {
		position: relative;
		width: 100%;
		height: 100%;

		.bg-set {
			position: absolute;
			width: 100%;
			height: 100%;
			top: -2rpx;
			left: 0;
		}

		.btn {
			position: absolute;
			bottom: 30upx;
			left: 180upx;
			right: 180upx;
			width: 310upx;
			height: 84upx;
			line-height: 82upx;
			background: #E14D4A;
			border-radius: 42upx;
			border: 1upx solid #979797;
			text-align: center;
			font-size: 34upx;
			font-weight: bold;
			color: #FFFFFF;
		}
	}
</style>
